import React from "react";

export default class IfDemo extends React.Component {
  /*
   * 常用的应用场景
   * 1）对视图条件进行切换
   * 2）做缺省值
   * */
  constructor() {
    super();
    this.state = {
      isLogin: true,
      names: [],
    };
  }

  showUser = () => {
    const { isLogin, names } = this.state;
    isLogin
      ? this.setState({ isLogin: false })
      : this.setState({ isLogin: true });
    names.length > 0
      ? this.setState({ names: [] })
      : this.setState({ names: ["dsd", "eqwq"] });
  };

  render() {
    let showView = this.state.isLogin ? <p>请登录</p> : <p>用户1</p>;
    const { names } = this.state;
    return (
      <div>
        <h1>react条件渲染</h1>

        <button onClick={this.showUser}>条件渲染-登录</button>
        {showView}
        <br />
        {names.length > 0 ? (
          <div>
            {names.map((ele, index) => {
              return (
                <span key={index}>
                  {ele} <br />
                </span>
              );
            })}
          </div>
        ) : (
          <div>数据正在请求,请等待</div>
        )}
      </div>
    );
  }
}
